<template>
  <div class="confirmOrder">
    <div class="bgColor">
      <h1 class="main-shopcart">确认订单</h1>
    </div>
    <div class="main">
      <div class="info">
        <div class="head">商品信息</div>
        <div class="info-main">
          <div class="courseInfo" v-for="item in cartList" :key="item.goods_id">
            <div class="coursebg">
              <img :src="item.img_small_logo" alt="" />
            </div>
            <div class="courseName">
              {{ item.title }}
            </div>
            <div class="coursePrice">
              <span class="nowprice"
                >￥{{ item.price * item.cart_number }}</span
              >
            </div>
          </div>
        </div>
        <div class="choose">
          <h3>支付方式 <span class="pay">payment.description</span></h3>
          <div class="choosebg">
            <span>支付宝</span>
            <span>微信</span>
          </div>
        </div>
        <ul class="foot">
          <li class="foot-item">
            应付<span class="unique">￥ {{ total.price }} </span>
          </li>
          <li>
            <button class="btn" @click="deletel">确认订单</button>
            <!-- <el-button text @click="open">确认订单</el-button> -->
          </li>
        </ul>
      </div>
    </div>
    <!-- 二维码对话框 -->
    <el-dialog v-model="dialogVisible" class="pay-dialog" width="500px">
      <div class="dialogPrice">支付：<span class="prices">299元</span></div>
      <div class="codeimg">
        <img src="qrCode" />
      </div>
      <div class="alert">请您及时付款，已便订单尽快处理！</div>
      <div class="finish">
        <div class="error">支付遇到问题</div>
        <div class="success">我已支付</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
// const dialogVisible = ref(true);
// import { storeToRefs } from 'pinia'
// pinia
import { useCartStore } from '../../store/cart';

import { settlement, getShopCarList, clearallCar } from '../../api/cart';
import store from '../../store';
import { storeToRefs } from 'pinia';
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter();
const cartStore = useCartStore();
const { cartList, total } = storeToRefs(cartStore);

const deletel = () => {
  ElMessageBox.confirm('支付', '确认支付？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      clearallCar(store.state.userInfo.id).then((res) => {
        console.log('555', res);
        router.push({ name: 'prorecomend' });
      });
      ElMessage.success({
        message: '支付成功',
      });

      // 成功后再次请求
      getShopCarList(store.state.userInfo.id).then((res) => {
        cartStore.cartList = res.cart || [];

        // location.reload()
      });
    })
    .catch(() => {
      ElMessage.info({
        message: '支付失败',
      });
    });
};

// 生命周期
onBeforeMount(() => {
  getShopCarList(store.state.userInfo.id).then((res) => {
    cartStore.addCart(res.cart);
    console.log('5454', res.cart);
  });

  // console.log('222',cartStore.orderlist);
});

const makesure = () => {
  settlement(store.state.userInfo.id).then((res) => {
    console.log('111', res);
  });
};
</script>

<style scoped>
ul > li {
  list-style: none;
}
.finish {
  width: 170px;

  line-height: 30px;
  margin: 0 auto;
  display: flex;
}
.success {
  margin-left: 20px;
  width: 70px;
  font-size: 12px;
  background: rgba(54, 137, 255, 0.22);
  color: #3692ff;
  cursor: pointer;
  border-radius: 8px;
}
.error {
  width: 100px;
  font-size: 12px;
  background: linear-gradient(90deg, #fc7979 0%, #da4848 100%);
  color: #ffffff;
  cursor: pointer;
  border-radius: 8px;
}
.el-dialog {
  text-align: center !important;
  border-radius: 10px !important;
}
.dialogPrice {
  padding-bottom: 20px;
  color: #93999f;
}
.prices {
  color: #f01414;
}
.alert {
  padding: 20px 0;
  font-size: 14px;
  color: #93999f;
}
.confirmOrder {
  width: 100%;
  padding-bottom: 60px;
}
.bgColor {
  width: 100%;
  height: 200px;
  background-color: red;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
.main-shopcart {
  width: 1200px;
  margin: 0 auto;
  height: 42px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 35px;
  color: #ffffff;
  /* padding: 30px 0; */
  padding-left: 30px;
  padding-top: 30px;
  opacity: 1;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.main {
  width: 1200px;
  margin: -100px auto 0 auto;
  /*background-color: red;*/
}
.main h1 {
  color: #ffffff;
  padding: 30px 0 30px 47px;
}
.info {
  width: 1180px;
  padding: 5px 0px 20px 0px;
  background: #f3f5f7;
  border-radius: 10px;
  box-shadow: 0px 2px 5px #888888;
}
.info-main {
  margin: 10px 20px;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
}
.head {
  padding: 20px;
  font-size: 18px;
  color: #333333;
}
/* 课程信息 */
.courseInfo {
  display: flex;
  width: 100%;
  height: 160px;
  margin: 0 auto;
}
.coursebg {
  width: 280px;
  height: 160px;
}
.coursebg img {
  margin-top: 30px;
  width: 50%;
  height: 50%;
}
.courseName {
  margin: 0 20px;
  width: 400px;
  height: 160px;
  font-size: 16px;
  color: #07111b;
  line-height: 160px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coursePrice {
  margin-left: 100px;
  height: 160px;
  text-align: right;
  line-height: 160px;
}
.coursePrice .nowprice {
  font-size: 18px;
  font-weight: 600;
  color: #1c1f21;
}
.coursePrice .oldprice {
  padding-left: 10px;
  font-size: 14px;
  text-decoration: line-through;
  color: #93999f;
}
/* 支付开始 */
.choose {
  width: 1200px;
  margin: 0 auto;
}
.choose h3 {
  color: #222;
  font-size: 16px;
  font-weight: 400;
  padding: 0 20px;
}
.choosebg {
  display: flex;
  margin: 20px;
}
.choosebg span {
  margin-top: 60px;
  margin-right: 40px;
}
.payment {
  width: 130px;
  height: 50px;
  border-radius: 10px;
  cursor: pointer;
  margin-right: 10px;
  line-height: 50px;
  display: flex;
  padding: 0 10px;
  align-items: center;
}
.payment i {
  font-size: 35px;
  margin-right: 10px;
}
.payment span {
  line-height: 50px;
  color: #222222;
  font-weight: bold;
}

.payStyle {
  /* background: url("/image/checkedVip.png") no-repeat; */
  background-size: 220px 111px;
  background-position: -67px -59px;
  border: #ff470a solid 1px !important;
}
.alipayment {
  border: #bfbfbf solid 1px;
  color: #01a8eb;
}
.wxpayment {
  border: #bfbfbf solid 1px;
  color: #01af37;
}

/* 支付结束 */
/* 结算 */
.foot {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #333333;
  margin-bottom: 10px;
}
.foot-item {
  width: 200px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.foot-item:first-child {
  margin-top: 3px;
}
.old {
  margin-left: 10px;
}
.unique {
  margin-left: 5px;
  font-size: 24px;
  color: #f01414;
}
.btn {
  margin-right: 80px;
  width: 150px;
  height: 50px;
  border: none;
  color: #ffffff;
  font-size: 20px;
  border-radius: 5px;
  background: #f01414;
  cursor: pointer;
  box-shadow: 0px 3px 5px 2px #ff727f;
}
.pay {
  font-size: 18px;
  padding-left: 10px;
  color: #f01414;
}
.codeimg {
  margin: 0 auto;
  border: #d2d2d2 solid 1px;
  width: 150px;
  height: 150px;
}
.codeimg img {
  width: 100%;
  height: 100%;
}
</style>
